<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { reactive, watch, computed } from 'vue'
import FinanciaBarOperate from '@/components/Echart/Bar/FinanciaBarOperate.vue'
import { useHumanStore } from '@/stores/module/human'
const HumanStore = useHumanStore() // 创建store实例
const { getPerformanceMet } = storeToRefs(HumanStore)

const options = computed(() => {
  return {
    name: 'OperationalEfficiencyMetrics',
    xAxis: {
      type: 'category',
      data: getPerformanceMet?.value?.sub_titles,
    },
    data: getPerformanceMet?.value?.info,
  }
})
</script>
<template>
  <card-box componentName="OperationalEfficiencyMetrics">
    <template v-slot:title>
      <h1>{{ getPerformanceMet.title }}</h1>
    </template>
    <FinanciaBarOperate :chartData="options" />
  </card-box>
</template>
<style lang="scss" scoped>
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;

  font-size: 16px;
  color: #00f6ff;
}
.subtitle {
  font-size: 30px;
}
</style>
